<template>
    <div class="login_container">
        <div class="logindiv">
            <div class="login">login</div>
            <div class="inputbox">
                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="120px">
                    <el-form-item label="登陆名称" prop="name">
                        <el-input  v-model="form.username"></el-input>
                    </el-form-item>

                    <el-form-item label="登陆密码" prop="psw">
                        <el-input v-model="form.password" type="password"  show-password></el-input>
                    </el-form-item>

                     <el-form-item class="btns">
                        <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
                        <el-button type="info" @click="resetForm(ruleFormRef)"> 重置 </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { ElForm } from 'element-plus'
import {post,store} from '../js/'
import { useRouter } from "vue-router"

const router = useRouter();


type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
const form = reactive({
  username: '',
  password: ''
})


const rules = reactive({
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 6,
      message: '密码长度3-6位',
      trigger: 'blur',
    },
  ],
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    }
  ]
  })


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
            post('/login', form).then(function (res) {
                 if (res.meta.status === 200) {
                    store.set('token',res.data.token);
                    router.push('/admin');
                }
            })
     
    } else {
      console.log('error submit!')
      return false
    }
  })
}


const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>
<style lang="less" scoped>

    .login_container{
        width: 100%;
        height: 100%;
        background:#ffffff url('../assets/png/background.jpeg') no-repeat right top
    }


    .logindiv {
        width: 425px;
        height: 300px;
        background: #FFF;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        box-sizing:border-box;
        box-shadow: 0px 15px 25px rgba(0,0,0,.5);
        border-radius:15px;
        background: rgba(0,0,0,.8);

        .login {
            font-size: 16;
            margin:40px 0 30px;
            color: #fff;
            text-align:center;
        }

        .inputbox{
            position: relative;
            padding: 0 30px 0 0;
            
            
            input {
                width: 100%;
                padding:10px 0;
                font-size:16px;
                color:#fff;
                letter-spacing: 1px;
                /*字符间的间距1px*/
                margin-bottom: 30px;
                border:none;
                border-bottom: 1px solid #fff;
                outline:none;
                /*outline用于绘制元素周围的线
                outline：none在这里用途是将输入框的边框的线条使其消失*/
                background: transparent;
                /*背景颜色为透明*/
            }
            
        }
    }


    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>